<template>
  <div class="tabNav">
    <div class="tabItem" @click="homeClickHandler">
      <img :src="homeIsSelected ? homeSelectedIcon : homeNoSelectedIcon" alt="" class="tabItemIcon">
      <p class="tabItemName" :class="{ 'selectedClass': homeIsSelected }">Trang đầu</p>
    </div>
    <div class="tabItem" @click="minClickHandler">
      <img :src="mineIsSelected ? mineSelectedIcon : mineNoSelectedIcon" alt="" class="tabItemIcon">
      <p class="tabItemName" :class="{ 'selectedClass': mineIsSelected }">Của tôi</p>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, watch } from 'vue';
import homeNoSelectedIcon from '/src/assets/home_noSelected.png'
import homeSelectedIcon from '@/assets/home_selected.png'
import mineNoSelectedIcon from '/src/assets/mine_noSelected.png'
import mineSelectedIcon from '@/assets/mine_selected.png'
import { useRouter } from 'vue-router';

const router = useRouter()

// homeIcon
let homeIsSelected = ref(true)
// minIcon
let mineIsSelected = ref(false)

const homeClickHandler = () => {
  homeIsSelected.value = true;
  mineIsSelected.value = false;
  router.replace({ name: 'Home' })

}

const minClickHandler = () => {
  homeIsSelected.value = false;
  mineIsSelected.value = true;
  router.replace({ name: 'Mine' })
}
watch(() => router.currentRoute.value.path, (newValue) => {
  if (newValue.includes('mine')) {
    homeIsSelected.value = false;
    mineIsSelected.value = true;
  }else{
    homeIsSelected.value = true;
    mineIsSelected.value = false;
  }
},{immediate:true})
</script>

<style scoped>
.tabNav {
  width: 100%;
  height: 2.75rem;
  background-color: white;
  border-top-right-radius: .6rem;
  border-top-left-radius: .6rem;
  position: fixed;
  bottom: 0;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-around;


  .tabItem {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .tabItemIcon {
      display: block;
      width: 1.4rem;
      height: 1.4rem;
    }

    .tabItemName {
      font-family: SF Pro, SF Pro;
      font-weight: 400;
      font-size: 12px;
      color: #9599A6;
      line-height: 18px;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }

    .selectedClass {
      font-weight: 500;
      color: #292B33;
    }
  }
}
</style>